<script>
export default {
  setup() {
    return {}
  },
}
</script>

<template>
  <view class="children-[view]:text-center">
    <view
      text="sm green"
      p="y-2 x-4"
      m="4"
      my-attr="y-1 x-2 sm"
    >
      view
    </view>

    <view
      text-base text-blue
      py-2 px-4
      m-4
    >
      view
    </view>

    <view border="~ red solid" m="4">
      view
    </view>

    <view text="red" li-text="blue">
      red or blue
    </view>

    <view bg="#333:30">
      111
    </view>

    <view bg="[#eaeaaa]/50">
      222
    </view>

    <view bg="#2ed1dd:80">
      333
    </view>

    <view
      li-text="sm green"
      li-p="y-2 x-4"
      li-m="4"
      li-my-attr="y-1 x-2 sm"
    >
      view
    </view>
  </view>
</template>
